<template>
	<view class="content">
		<view class="bg">
			<view class="bg_radius_1"></view>
		</view>
		<view class="personal">
			<view class="personal_head">
				<image class="avatar" :src="user.avatar"></image>
				<view class="name">
					<view style="font-size: 32upx;color: #555555;">{{user.name}}</view>
					<view>
						<view class="lecel_label">普通会员</view>
					</view>
				</view>
				<view style="position: absolute;right: 0;" @tap="goSet">
					<uni-icon type="gear-filled" color="#999999" size="18"></uni-icon>
				</view>
			</view>
			<view style="width: 100%;margin-top: 20upx;">
				<view @tap="goIntegral()" class="intervel_view">
					<view style="font-size: 30upx;color: #555555;">{{num.integral}}</view>
					<view style="margin-top:20upx;color: #888888;">积分</view>
				</view>
				<view @tap="goCoupon()" class=".coupon_view">
					<view style="font-size: 30upx;color: #555555;">{{num.coupon}}</view>
					<view style="margin-top:20upx;color: #888888;">优惠券</view>
				</view>
			</view>
		</view>

		<view class="order">
			<view class="order_head">
				<view class="text1">我的订单</view>
				<view @tap="goOrder(null)">
					<view class="text2">查看全部</view>
					<view>
						<uni-icon type='arrowright' color="#888888"></uni-icon>
					</view>
				</view>
			</view>
			<view class="order_item_view">
				<view class="order_item" @tap="goOrder(0)">
					<image src="../../static/icon/12.png" style="width: 60upx;height: 60upx;">
					</image>
					<view class="order_count center" v-if="orderCount.noPayCount!=0">{{orderCount.noPayCount}}</view>
					<view class="order_item_name">待付款</view>
				</view>
				<view class="order_item" @tap="goOrder(1)">
					<image src="../../static/icon/23.png" style="width: 60upx;height: 60upx;">
					</image>
					<view class="order_count center" v-if="orderCount.noSendCount!=0">{{orderCount.noSendCount}}</view>
					<view class="order_item_name">待发货</view>
				</view>
				<view class="order_item" @tap="goOrder(2)">
					<image src="../../static/icon/34.png" style="width: 60upx;height: 60upx;">
					</image>
					<view class="order_count center" v-if="orderCount.noReceiveCount!=0">{{orderCount.noReceiveCount}}</view>
					<view class="order_item_name">已发货</view>
				</view>
				<view class="order_item" @tap="goOrder(3)">
					<image src="../../static/icon/45.png" style="width: 60upx;height: 60upx;">
					</image>
					<view class="order_count center" v-if="orderCount.noCommentCount!=0">{{orderCount.noCommentCount}}</view>
					<view class="order_item_name">评论</view>
				</view>
				<view class="order_item" @tap="goRefundOrder">
					<image src="../../static/icon/56.png" style="width: 60upx;height: 60upx;">
					</image>
					<view class="order_count center" v-if="orderCount.afterSaleCount!=0">{{orderCount.afterSaleCount}}</view>
					<view class="order_item_name">退货/售后</view>
				</view>
			</view>
		</view>
		<view class="app_view">
			<view class="app_item_view">
				<view class="app_item" @tap="goIntegral()">
					<view style="align-items: center;" >
						<image src="../../static/icon/kanjia.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">砍价中心</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>
				<view class="app_item" @tap="goIntegral()">
					<view style="align-items: center;">
						<image src="../../static/icon/mvnf.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">分享有礼</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>
			</view>

			<view class="app_item_view">
				<view class="app_item" style="position: relative;">
					<view style="align-items: center;">
						<image src="../../static/icon/kkff.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">在线客服</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
					<button open-type="contact" class="open_bt"></button>
				</view>
				<view class="app_item" @tap="goAddress()">
					<view style="align-items: center;">
						<image src="../../static/icon/ddzz.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">地址管理</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>
				<view class="app_item" @tap="goHelp">
					<view style="align-items: center;">
						<image src="../../static/icon/help.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">帮助中心</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>
				<view class="app_item" @tap="goContact()">
					<view style="align-items: center;">
						<image src="../../static/icon/cooc.png" style="width: 40upx;height: 40upx;"></image>
						<view style="margin-left: 15upx;color: #333333;">联系我们</view>
					</view>
					<view>
						<uni-icon type="arrowright" color="#555555"></uni-icon>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import api from '../../common/api.js';
	import {
		get
	} from '../../common/request.js';
	export default {
		data() {
			return {
				user: {},
				num: {},
				orderCount: {},
			}
		},
		components: {
			uniIcon
		},
		onShow() {
			let s = uni.getStorageSync("user")
			if (s != null && s != '') {
				this.user = JSON.parse(s)
				this.initdata()
			} else {
				uni.navigateTo({
					url: "../login/index"
				})
			}

		},
		methods: {
			goRefundOrder(){
				uni.navigateTo({
					url:"../order/refundOrderList"
				})
			},
			goContact() {
				uni.navigateTo({
					url: "../contact/contact"
				})
			},
			goHelp() {
				uni.navigateTo({
					url: "../help/index"
				})
			},
			goIntegral() {
				uni.showToast({
					icon: "none",
					title: "敬请期待"
				})
			},
			goCoupon() {
				uni.navigateTo({
					url: "../coupon/ownCoupon"
				})
			},
			goOrder(type) {
				uni.navigateTo({
					url: "../order/list?type=" + type
				})
			},
			goAddress() {
				uni.navigateTo({
					url: "./address"
				})
			},
			goSet() {
				uni.navigateTo({
					url: "./set"
				})
			},
			initdata() {
				get(api.USER_COUNT).then(res => {
					this.num = res.data
					get(api.OREDER_COUNT).then(resp => {
						this.orderCount = resp.data
					})
				})
			}

		}
	}
</script>

<style>
	.order_count {
		position: absolute;
		top: -10upx;
		right: 20upx;
		color: #FE0036;
		border-radius: 30upx;
		width: 30upx;
		height: 30upx;
		font-size: 22upx;
		border: 4upx solid #FE0036;
		background-color: #FFFFFF;
	}

	.app_item {
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		width: 100%;
		border-bottom: 3upx solid #F2F3F5;
	}

	.app_item_view {
		background-color: #FFFFFF;
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		margin-top: 30upx;
		flex-direction: column;
		border-radius: 20upx;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	}



	.coupon_view {
		flex: 1;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.intervel_view {
		flex: 1;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-right: 1px solid #F2F3F5;
	}

	.lecel_label {
		border: 1px solid #FF0033;
		color: #FF0033;
		border-radius: 5upx;
		margin-top: 10upx;
	}

	.item_icon {
		width: 80upx;
		height: 80upx;
	}

	.app_view {
		width: 690upx;
		margin-left: 30upx;
		flex-direction: column;
		padding-bottom: 30upx;
	}

	.name {
		flex-direction: column;
		margin: 30upx 0 0 30upx;
	}

	.personal_head {
		position: relative;
		width: 100%;
		padding-bottom: 20upx;
		border-bottom: 1px solid #F2F3F5;
	}

	.personal {
		flex-direction: column;
		position: absolute;
		padding: 30upx 30upx;
		box-sizing: border-box;
		top: 30upx;
		left: 30upx;
		width: 690upx;
		z-index: 100;
		background-color: #FFFFFF;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.con {
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.bg {
		position: relative;
		height: 250upx;
		width: 100%;
		overflow: hidden;
	}

	.bg_radius_1 {
		background-image: linear-gradient(to bottom, #fe0338, #ff0469);
		position: absolute;
		top: 0;
		left: -180upx;
		height: 250upx;
		width: 1100upx;
		border-bottom-left-radius: 1000upx;
		border-bottom-right-radius: 1000upx;
		z-index: 2;
	}

	.order_item_name {
		margin-top: 15upx;
		color: #555555;
		font-size: 24upx;
	}

	.order_item {
		width: 20%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.order_item_view {
		padding: 20upx 20upx;
		box-sizing: border-box;
	}

	.text2 {
		color: #999999;
	}

	.text1 {
		color: #555555;
	}

	.order_head {
		justify-content: space-between;
		padding: 20upx 20upx;
		border-bottom: 1px solid #F2F3F5;
	}

	.order {
		margin-top: 150upx;
		border-radius: 10upx;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		flex-direction: column;
		background-color: #FFFFFF;
		width: 690upx;
		margin-left: 30upx;
	}

	.head_name {
		margin-left: 30upx;
		margin-top: 40upx;
	}

	.head_view {
		margin-left: 50upx;
		margin-top: 30upx;
	}

	.avatar {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.head {
		height: 250upx;
		position: relative;
		background-image: linear-gradient(to right, #FFCC00, #FFFF99);
	}

	.con {
		flex-direction: column;
		padding: 0 15upx;
		box-sizing: border-box;
	}

	.out {
		width: 100%;
		height: 150upx;
		align-items: center;
		justify-content: center;
	}

	.out_button {
		height: 70upx;
		width: 400upx;
		background-color: #FF0033;
		color: #FFFFFF;
		font-size: 35upx;
		font-weight: 600;
		align-items: center;
		justify-content: center;
		border-radius: 50upx;
	}

	.out_button:active {
		color: #FF0033;
		border: 1px solid #FF0033;
		background-color: #FFFFFF;
	}
</style>
